<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      什么是分离DOM
        界面元素存活在DOM树上
        垃圾对象时的DOM节点：脱离根DOM元素，并且js中没有引用
        分离状态的DOM节点：脱离根DOM元素，当时js中有引用他，属于内存泄漏
      
      调试
        浏览器 -> F12 -> 内存 -> 堆块照 -> 拍摄快照 -> 按类过滤（deta）
    -->
    <button id="btn">Add</button>
    <script>
      var tmpEl;

      function fn() {
        var ul = document.createElement("ul");
        for (var i = 0; i < 10; i++) {
          var li = document.createElement("li");
          ul.appendChild(li);
        }
        tmpEl = ul;

        tmpEl = null;
      }

      document.getElementById("btn").addEventListener("click", fn);
    </script>
  </body>
</html>
